<template>
    <div class="contact-add">
        <div class="wrapper">
            <h1 class="big-title">添加联系人</h1>
            <div class="add-input">
                <i class='icon'><img src="../images/phone.png"></i>
                <input v-model='tel' type="tel" placeholder="输入对方手机号添加">
                <div class="add-button"><span class="button auto" @click='add'>确定</span></div>
            </div>
            <template v-if='list.length'>
                <h1 class="big-title">联系人申请</h1>
                <ul class="apply-list">
                    <li class="apply__item" v-for='item in list'>
                        <img class='apply__avatar' :src="item.user && item.user.avatar">
                        <div class="apply__info" v-if='item.user'>
                            <p class="name">{{item.user.realName}}</p>
                            <p class="memo">{{item.applyReason || '请求添加你为联系人'}}</p>
                        </div>
                        <span class="button pure auto" @click='setCurUser(item)' v-if='item.applyState == "APPLYING"'>同意</span>
                        <span class="button transparent pure auto" v-if='item.applyState == "CONFIRM"'>已同意</span>
                    </li>
                </ul>
            </template>
        </div>



        <confirm 
            :show='show_contact_add'
            @close='show_contact_add = false'
            @confirm='applyContact'
            :tips='`需要发送申请给${addUser.realName || addUser.mobile }`'
            title='添加联系人申请'>
                <textarea class="confirm-textarea" placeholder="例如: 我想向你借款" rows='2' v-model='applyReason'></textarea>
        </confirm>
        <confirm 
            :show='show_contact_agree'
            @close='show_contact_agree = false'
            @confirm='agreeContact'
            :tips='`是否同意${curUser.realName}成为您的好友`'
            title='同意联系人申请'></confirm>

    </div>
</template>

<script>
    import { Promise } from 'es6-promise'
    import footerBar from '../components/FooterBar.vue'
    import selectGroup from '../components/SelectGroup.vue'
    import selectOption from '../components/SelectOption.vue'
    import radioGroup from '../components/RadioGroup.vue'
    import areaSelect from '../components/AreaSelect.vue'
    import radio from '../components/Radio.vue'
    import loading from '../components/Loading.vue'
    import checkBox from '../components/CheckBox.vue'
    import toolTip from '../components/ToolTip.vue'
    import modal from '../components/Modal.vue'
    import confirm from '../components/Confirm.vue'
    import buttonLoading from '../components/ButtonLoading.vue'
    import pagination from '../components/Pagination.vue'
    import payPassword from '../components/PayPassword.vue'
    import pickerList from '../components/PickerList.vue'
    import  { mapGetters, mapActions }  from 'vuex'
    import { contactAddValidation } from '../validation/validation'
    import { contactApi } from '../api/api'
    import moment from 'moment'

    export default {
        components:{
            footerBar,
            selectGroup,
            selectOption,
            radioGroup,
            radio,
            checkBox,
            areaSelect,
            loading,
            toolTip,
            modal,
            confirm,
            buttonLoading,
            pagination,
            payPassword,
            pickerList
        },
        data() {
            return {
                tel:'',
                curUser:'',
                addUser:{},
                applyReason:'',
                show_contact_add:false,
                show_contact_agree:false,
                list:[]
            }
        },
        computed:{
            ...mapGetters([
                'msgTip',
                'localInfo'
            ]),
            currentPage(){
                if(_.isEmpty(this.listInfo)) return 1
                return this.listInfo.pageNum
            },
            hasUserCount(){
                return !_.isEmpty(this.userCount)
            },
            noEditObject(){
                return _.isEmpty(this.editObject)
            },
            noInvoiceInfo(){
                return _.isEmpty(this.invoiceInfo)
            }
        },
        methods:{
            // actions
            ...mapActions([
                'showLoading',
                'hideLoading',
                'setMsgTip'
            ]),
            // function
            setCurUser(item){
                this.curUser = item.user
                this.show_contact_agree = true
            },
            add(){
                if(!contactAddValidation({ tel:this.tel })) return


                contactApi.judge({
                    mobile:this.tel
                })
                .then(result=>{
                    this.addUser = result
                    this.show_contact_add = true
                    this.hideLoading()
                })
                .catch(error => {
                    console.error(error)
                    this.hideLoading()
                })
            },
            applyContact(){
                this.showLoading()
                contactApi.apply({
                    mobile:this.tel,
                    applyReason:this.applyReason
                })
                .then(result=>{
                    this.hideLoading()
                    this.show_contact_add = false
                })
                .catch(error => {
                    console.error(error)
                    this.hideLoading()
                })
            },
            agreeContact(){
                this.showLoading()
                contactApi.agree({
                    mobile:this.curUser.mobile
                })
                .then(result=>{
                    this.hideLoading()
                    this.applyList()
                    this.show_contact_agree = false
                })
                .catch(error => {
                    console.error(error)
                    this.hideLoading()
                })
            },
            applyList(){
                this.showLoading()
                contactApi.applyList()
                .then(result=>{
                    this.hideLoading()
                    this.list = result
                })
                .catch(error => {
                    console.error(error)
                    this.hideLoading()
                })
            }
        },
        created(){
            this.applyList()
        }
    }
</script>

<style lang="scss">
    @import "../sass/variables";
    @import "../sass/extends";
    @import "../sass/mixins";
    .contact-add{
        .add-input{
            display: flex;
            background-color: #fff;
            align-items: center;
            position: relative;
            margin-bottom: 16px;
            padding-left: 16px;
            .icon{
                display: block;
                width: 24px;
                height: 24px;
                text-align: center;
                line-height: 24px;
                img{
                    height: 20px;
                }

            }
            input{
                @extend %font-subhead;
                display: block;
                box-sizing:border-box;
                padding:15px;
                flex:1;
                width: 100px;
            }
            .add-button{
                padding-right: 16px;
                .button{
                    padding-left: 17px;
                    padding-right: 17px;
                }
            }
        }
        .apply__item{
            display: flex;
            align-items: center;
            padding:6px 8px 4px 16px;
            background-color: #fff;
            position: relative;
            &:after{
                content:'';
                position: absolute;
                right:0;
                left:16px;
                bottom:0;
                border-bottom: 1px solid $sectionColor;
            }
            &:last-child{
                &:after{
                    border-bottom: none;
                }
            }
            .transparent{
                color:$defaultColor;
            }
        }
        .apply__avatar{
            width: 40px;
            height: 40px;
            display: block;
            border-radius:50%;
            padding-right: 16px;
        }
        .apply__info{
            flex:1;
            .name{
                @extend %font-body1;
                color:$importColor;
                padding-bottom: 1px;
            }
            .memo{
                @extend %font-caption;
            }
        }
        .button{
            width: 80px;
        }
    }

</style>
